<template>
	<view class="container">
		<view class="tag-pic"><image mode="widthFix" src="https://xike001.oss-cn-hangzhou.aliyuncs.com/job/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220718143758.png"></image></view>
		<view class="job-box">
			<view class="job-list" v-if="jobList.length">
				<view class="job-item" v-for="(item, index) in jobList" :key="index" @click="goJobDetail(item)">
					<view class="top">
						<view class="title">
							<text>{{item.name}}</text>
							<text class="distance">距你{{item.distance}}</text>
						</view>
						<view class="tag" v-if="item.taglist.length">
							<view class="tag-item" v-for="tag_item,tag_index in item.taglist" :key="tag_index">{{tag_item}}</view>
						</view>
					</view>
					<view class="bottom">
						<text class="price">{{item.salary}}</text>
						<view class="look-btn">去看看</view>
					</view>
				</view>
			</view>
			<view v-else>
				<van-empty description="暂无职位" />
			</view>
		</view>
		<view class="fixed-box">
			<view class="tabbar">
				<view class="tabbar-item" @click="goback">看更多工作</view>
				<view class="tabbar-item"><button open-type="share">分享给好友</button></view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getAllJobs } from '@/api/public.js'
	import { mapState, mapMutations } from 'vuex'
	
export default {
	data() {
		return {
			jobList: [],
			tag:'',
			tagName:'',
			page: 1,
			pagesize: 10
		}
	},
	computed: {
		...mapState(['location'])
	},
	onLoad(e) {
		if(e)
		{
			uni.setNavigationBarTitle({
				title: decodeURI( e.name )
			})
			this.tagName = decodeURI(e.name)
			this.tag = e.id
			// 加载职位列表
			this.loadData()
		}
	},
	methods:{
		loadData(){
			let params = {
				taglist:this.tag,
				page: this.page,
				pagesize: this.pagesize
			}
			if (this.location) {
				params.lng = this.location.longitude
				params.lat = this.location.latitude
			}
			getAllJobs(params).then(res => {
				if(res.length)
				{
					this.jobList = this.jobList.concat(res)
					this.page++
				}
			}).catch(err => {
				uni.showToast({
					title:'加载职位列表失败',
					icon:'none'
				})
			})
		},
		goback(){
			uni.navigateBack()
		},
		goJobDetail(item) {
			uni.navigateTo({
				url: `./detail?id=${item.id}`
			})
		},
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内转发按钮
			console.log(res.target)
		}
		let that = this
		return {
			title: this.tagName,			
			path: `/pages/index/job/tag?id=${this.tag}&name=${this.tagName}`
		}
	},
	onReachBottom(e) {
		this.loadData()
	}
}
</script>

<style lang="scss">
.container {
	padding-bottom: 100rpx;
	.tag-pic {
		image {
			width: 100%;
		}
	}
	.job-box {
		padding: 20rpx;
		.job-list {
			background-color: #f5f5f5;
			.job-item {
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				background-color: #fff;
				cursor: pointer;
				&:last-of-type {
					margin-bottom: 0;
				}
				.top {
					position: relative;
					padding: 20rpx 20rpx 0 20rpx;
					&::after {
						content: '';
						position: absolute;
						left: 0;
						width: 100%;
						height: 1px;
						background-color: #e5e5e5;
					}
					.title {
						font-size: 30rpx;
						margin-bottom: 20rpx;
						.distance {
							font-size: 20rpx;
							color: #999999;
							float: right;
							margin-top: 5rpx;
						}
					}
					.tag {
						display: flex;
						overflow: hidden;
						margin-bottom: 20rpx;
						.tag-item {
							font-size: 26rpx;
							margin-left: 10rpx;
							padding: 5rpx;
							color: #749ced;
							background-color: #edeffc;
							&:first-of-type {
								margin-left: 0;
							}
						}
					}
				}
				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 10rpx 20rpx;
					.price {
						color: #07C160;
					}
					.look-btn {
						background-color: #07C160 !important;
						color: #fff;
						padding: 10rpx 20rpx;
						border-radius: 8rpx;
					}
				}
			}
		}
	}
	.fixed-box{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		.tabbar{			
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			.tabbar-item{
				flex: 1;
				text-align: center;
				cursor: pointer;
				height: 100rpx;
				line-height: 100rpx;
				font-weight: bold;
				color: #fff;
				font-size: 36rpx;
				&:nth-of-type(1){
					background-image: linear-gradient(to right, #FFB933 , #FF8E14);
				}
				&:nth-of-type(2){
					button{
						background: transparent;
						color: #fff;
						box-shadow: none;
						&::after{
							  border: 0; 
						}
					}
					background-image: linear-gradient(to right, #FD5B64 , #E03A43);
				}
			}
		}
	}
}
</style>
